<template>
  <div class="menuPageDataBox">
    <el-table :data="data" border v-if="refreshTable" row-key="menuId"
      :tree-props="{ children: 'child', hasChildren: 'hasChildren' }" :default-expand-all="executeIsExpandAll"
      style="width: 100%">
      <el-table-column v-for="item in formDefinition" :key="item.name" :prop="item.name" :label="item.title"
        :width="item.width" :align="handlerAlign(item.name)">
        <template slot-scope="props">
          <i v-if="item.name === 'icon'" class="iconfont" :class="props.row.icon" />
          <el-switch v-else-if="item.name === 'isEnable' && $auth.checkMenuPermissions('system:menu:update')" v-model="props.row[item.name]" active-color="#13ce66"
            @change="isEnableHandler($event, props.row)" />
          <span v-else>{{ props.row[item.name] }}</span>
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作" align="center" width="220">
        <template slot-scope="scope">
          <el-button @click.native.prevent="addMenu(scope.row)" type="text" size="small"
            v-if="scope.row.menuType !== 'F' && $auth.checkMenuPermissions('system:menu:add')">
            新增
          </el-button>
          <el-button @click.native.prevent="updateMenu(scope.row)" type="text" size="small" v-if="$auth.checkMenuPermissions('system:menu:update')">
            修改
          </el-button>
          <el-button @click.native.prevent="deleteMenu(scope.row)" type="text" size="small" v-if="$auth.checkMenuPermissions('system:menu:delete')">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { noSelectText } from '@/utils/styleUtils'
import { menuIsEnable } from '@/api/system/menusApi'
export default {
  name: "menuData",
  props: {
    //渲染组件使用的数据集
    data: {
      type: Array,
      required: false,
    },
    /**
     * 数据表格式定义
     * title: 数据表格的标题
     * name:  后端返回要渲染的字段名称
     * width: 当前数据占用列的宽度
     */
    formDefinition: {
      type: Array,
      required: true,
      default: [{ title: "标题", name: "field", width: "180" }],
    },
    /**
     * 是否折叠数据表
     */
    isExpandAll: {
      type: Boolean,
      required: true
    },
    /**
     * 新增按钮
     */
    addMenu: {
      type: Function,
      required: true
    },
    updateMenu: {
      type: Function,
      required: true
    },
    deleteMenu: {
      type: Function,
      required: true
    }
  },
  data() {
    return {
      refreshTable: true,
    }
  },
  methods: {
    //处理数据树是否折叠
    handlerExpand() {
      this.refreshTable = false;
      this.$nextTick(() => {
        this.refreshTable = true;
      })
    },
    //处理表数据的对齐方式
    handlerAlign(field) {
      switch (field) {
        case 'icon':
        case 'sort':
        case 'isEnable':
        case 'updateTime':
        case 'updateBy':
        case 'path':
        case 'perms':
        case 'component':
        case 'menuTypeName':
          return 'center'
        default:
          return 'left'
      }
    },
    //处理启用停用开关
    isEnableHandler(event, row) {
      if (event) {
        menuIsEnable(row.menuId, event).then(data => {

        }).catch(err => {
          this.$message.error(err);
          row.isEnable = !event;
        })
      } else {
        this.$confirm(`确认要停用 [${row.name}] ${row.menuTypeName}?`, '操作确认', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          menuIsEnable(row.menuId, event).then(data => {
            this.$message.success('操作成功')
          }).catch(err => {
            this.$message.error(err);
            row.isEnable = !event;
          })
        }).catch(()=>{
          row.isEnable = !event;
        })
      }
    }

  },
  mounted() {
    noSelectText(".menuPageDataBox");
  },
  computed: {
    executeIsExpandAll() {
      this.handlerExpand();
      return this.isExpandAll;
    }
  },
};
</script>

<style scoped lang="scss">
.el-table {
  margin-top: 18px;
  height: 75vh;
}
</style>
